<template>
  <div class="container" v-if="show">
    <el-card shadow="always" class="analysis">
      <div class="title">
        {{ $moment().subtract(1, "day").format("YYYY-MM-DD") }}综合分值分析
      </div>
      <el-row :gutter="20">
        <el-col :span="8"> <div class="main"></div> 
        </el-col>
        <el-col :span="8"> <div class="radar"></div></el-col>
        <el-col :span="8">
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="name" label="分类"> </el-table-column>
            <el-table-column prop="max" label="分值"> </el-table-column>
            <el-table-column prop="value" label="得分">
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>


    <rz-height></rz-height>

    <template v-if="recordList.length">
      <div>
          <div class="title">
       精准画像分析
      </div>
    <rz-height></rz-height>
    <el-table   ref="table" :data="recordList" border style="width: 100%">
        <el-table-column prop="categoryStr" label="分类" width="100">
        </el-table-column>
        <el-table-column prop="reasonReason" label="扣分明细">
        </el-table-column>
        <el-table-column prop="score" label="扣分分值"  width="100"> 
        </el-table-column>
              <el-table-column type="expand" width="1">
      <template >
        <div class="table">
         
               <el-table :data="recordListA.filter(x=>x.categoryStr=='主体责任')" border style="width: 100%">
        <el-table-column prop="reasonReason" label="扣分明细">
                <template slot-scope="scope">
                  <div>
                    {{scope.row.reasonReason|filterHtml}} 
                  </div>
                </template>
                
        </el-table-column>
      
      </el-table>

          </div>
      </template>
    </el-table-column>
      </el-table>
      </div>
    </template>



    </el-card>
  </div>
  <el-empty v-else description="该单位暂未生成精准画像"></el-empty>
</template>
<script>
import {
  findSuperviseUnitUpdate,
  findListByConditionSafety,
  findsuperviseUnitRecordById
} from "@/api/modules/interpretation";

var echarts = require("echarts");
export default {
  // props:[],
  // 页面加载
  created() {
    this.getList();
    this.findListByConditionSafety();
  },
  // 页面加载完成
  mounted() {},
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      tableData: [],
      data: {},
      recordList: [],
      show:true,
      recordListA:[]
    };
  },
  // 方法
  methods: {
    meterInit() {
      var chartDom = document.querySelector(".main");
      var myChart = echarts.init(chartDom);
      let option = {
        series: [
          {
            type: "gauge",
            axisLine: {
              lineStyle: {
                width: 20,
                color: [
                  [0.59, "#ff0000"],
                  [0.79, "#ffd700"],
                  [1, "#008000"],
                ],
              },
            },
            pointer: {
              itemStyle: {
                color: "auto",
              },
            },
            axisTick: {
              distance: -20,
              length: 8,
              lineStyle: {
                color: "#fff",
                width: 1,
              },
            },
            splitLine: {
              distance: -35,
              length: 30,
              lineStyle: {
                color: "#fff",
                width: 1,
              },
            },
            axisLabel: {
              color: "auto",
              distance: 30,
              fontSize: 15,
            },
            detail: {
              valueAnimation: true,
              formatter: "{value}",
              color: "auto",
            },
            data: [
              {
                value: this.data.indexScore,
              },
            ],
            center: ["50%", "50%"],
            radius: "80%",
          },
        ],
      };
      myChart.setOption(option);
    },
    radarInit() {
      var chartDom = document.querySelector(".radar");
      var myChart = echarts.init(chartDom);
      let option = {
        lineStyle: {
          color: "#1890ff",
        },
        title: {
          // text: "Basic Radar Chart",
        },
        tooltip: {
          show: true,
        },
        // legend: {
        //   data: ["Allocated Budget", "Actual Spending"],
        // },
        radar: {
          // shape: 'circle',
          indicator: [
            { name: "主体责任", max: this.data.fiveDimensionalScore.aTotalScore },
            { name: "部门监管", max: this.data.fiveDimensionalScore.bTotalScore },
            { name: "负面信息", max: this.data.fiveDimensionalScore.cTotalScore },
            { name: "信用荣誉", max: this.data.fiveDimensionalScore.dTotalScore },
            { name: "社会监督", max: this.data.fiveDimensionalScore.eTotalScore },
          ],
          axisName: {
            // formatter: '【{value}】',
            color: "#1890ff",
          },
          splitArea: {
            areaStyle: {
              // color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
              shadowColor: "rgba(0, 0, 0, 0.2)",
              shadowBlur: 10,
            },
          },
        },
        series: [
          {
            name: "分值",
            type: "radar",
            data: [
              {
                value: [
                      this.data.fiveDimensionalScore.aScore,
            this.data.fiveDimensionalScore.bScore,
             this.data.fiveDimensionalScore.cScore,
            this.data.fiveDimensionalScore.dScore,
            this.data.fiveDimensionalScore.eScore,
                ],
              },
            ],
            itemStyle: {
              // normal: {
                color: "#1890ff",
                //  opacity: 0
              // },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
  
    getList() {
      findSuperviseUnitUpdate({
      endCreateTime: this.$moment().format('YYYY-MM-DD'),
newLicenseNo:sessionStorage.getItem("newLicenseNo"),
isPage: 1,
page: 1,
pageSize: 1,
startCreateTime: this.$moment().format('YYYY-MM-DD'),
      }).then((res) => {
        
        // console.log(res.data.list);
        if(res.data.list.length){
            this.data =res.data.list[0];
this.tableData =[
    { 
        name:"主体责任",
        value:this.data.fiveDimensionalScore.aScore,
        max:this.data.fiveDimensionalScore.aTotalScore,
    },
      { 
        name:"部门监管",
        value:this.data.fiveDimensionalScore.bScore,
           max:this.data.fiveDimensionalScore.bTotalScore,
    },
      { 
        name:"负面信息",
        value:this.data.fiveDimensionalScore.cScore,
           max: this.data.fiveDimensionalScore.cTotalScore,
    },
      { 
        name:"信用荣誉",
        value:this.data.fiveDimensionalScore.dScore,
           max:this.data.fiveDimensionalScore.dTotalScore,
    },
      { 
        name:"社会监督",
        value:this.data.fiveDimensionalScore.eScore,
           max:this.data.fiveDimensionalScore.eTotalScore,
    },
]



  findsuperviseUnitRecordById({
        params: {
              id:this.data.id,
            },
      }).then((res) => {
            this.recordList=res.data
      })








        }else{
            this.show=false;
            // this.$error("该单位暂无精准画像")
        }
        // res.data.foodSafetyIndexItemResponseList.forEach((x) => {
        //   if (x.name == "安全事故") {
        //     x.url = "/interpretation/security";
        //   } else if (x.name == "主体责任") {
        //     x.url = "/interpretation/homeRespon";
        //   } else if (x.name == "投诉举报") {
        //     x.url = "/interpretation/complaints";
        //   } else if (x.name == "日常监督") {
        //     x.url = "/interpretation/supervise";
        //   } else if (x.name == "食品抽检") {
        //     x.url = "/interpretation/spotCheck";
        //   }
        // });
        // this.tableData = res.data.foodSafetyIndexItemResponseList;
        this.$nextTick(() => {
          this.meterInit();
          this.radarInit();
        });
      }).catch(() => {
             this.show=false;
            // this.$error("该单位暂无精准画像")
      })
    },
    findListByConditionSafety() {
      findListByConditionSafety({
        fSuperviseunitId: sessionStorage.getItem("interpretation"),
        indexYear: new Date().getFullYear(),
        startDate: this.$moment().subtract(10, "day").format("YYYY-MM-DD"),
        endDate: this.$moment().format("YYYY-MM-DD"),
        isReverseTimeOrder: "1",
      }).then((res) => {
            setTimeout(()=>{
             this.$nextTick(()=>{
             this.recordList.forEach(x=>{
          if(x.categoryStr=='日常管理'){
        let $table = this.$refs.table;
      $table.toggleRowExpansion(x);
          }
        })
          })
        },500)
        if(res.data.length&&res.data[0].detailUnitFoodRecordResponseList){
        this.recordListA =res.data[0].detailUnitFoodRecordResponseList;
        }
      });

    },
  },
  // 监听属性
  watch: {},
  // 组件
  components: {},
  // 计算属性
  computed: {},
};
</script>

<style lang="scss" scoped>
.container {
  // background-color: #fff;

  .title {
    font-size: 20px;
  }
  .main,
  .radar,
  .line {
    height: 250px;
    width: 100%;
  }
  .analysis {
    /deep/ .el-table--medium .el-table__cell {
      padding: 7px 0;
    }
    a{
      text-decoration: underline;
      color: $default;
    }
  }
  .table{
    padding: 0 10px;
  }
  
/deep/ .el-icon-arrow-right{
    display: none ;
 
  }
}
</style>